<template>
    <view>
        <view class="container" :class="{'on': show}">
            <view class="header-container">
                <view style="position: absolute;right: 40rpx;top: 30rpx;">
                    <u-icon color="grey" style="padding: 20rpx" name="close" @click="closeMask"></u-icon>
                </view>
                <text>选择收货地址</text>
            </view>
            <view style="min-height: 45vh">
                <view class="address" v-for="(item,index) in addressList" :key="index" @click="chooseAddress(item)">
                    <view class="left-container">
                        <view class="checkbox-content">
                            <s-checkbox checkBg="#0abf4c" :checked="selectedItem.id == item.id"></s-checkbox>
                        </view>
                        <view class="right-content">
                            <view class="province-info">
                                <view class="default-content" v-if="item.is_default == 1">默认</view>
                                <text class="province">{{item.province}}{{item.city}}{{item.area}}</text>
                            </view>
                            <text class="detail">{{item.address}}</text>
                            <view class="user-name">
                                <text>{{item.consignee}}</text>
                                <text>{{item.phone}}</text>
                            </view>
                        </view>
                    </view>
<!--                    <view class="edit-btn">-->
<!--                        <u-icon name="edit-pen" color="grey" size="40"></u-icon>-->
<!--                    </view>-->
                </view>
            </view>

            <view class="bottom-container">
                <view class="cancel-btn btn" @click="closeMask">取消</view>
                <view class="confirm-btn btn" @click="confirm">确认</view>
            </view>

        </view>
        <view class="mask" :hidden="show == false" @click="closeMask"></view>
    </view>
</template>

<script>

export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            addressList: [],
            selectedItem: 1
        }
    },
    mounted() {
        this.getAddressList()
    },
    methods: {

        chooseAddress(item) {
            this.selectedItem = item
        },

        confirm() {
            this.$emit('choose',this.selectedItem)
            this.closeMask()
        },

        async getAddressList() {
            var userToken=wx.getStorageSync('userToken')
            let res=await this.$api.getShippingAddress({user_token:userToken,page: 1,limit: 99},this.$baseUrl)
            this.addressList=res.data.data
            // this.addressList = [{
            //     id: '1791',
            //     consignee: '霖（测试）',
            //     address: '创意空间317',
            //     area: '天河区',
            //     city: '广州市',
            //     province: '广东省',
            //     phone: '15605222522',
            //     is_default: 1
            // }]
        },

        closeMask(type = '') {
            this.$emit('close')
        }

    }
}
</script>

<style lang="scss" scoped>
    .on {
        transform: translate3d(0, 0, 0) !important;
    }
    .container {
        box-sizing: border-box;
        position: fixed;
        height: 63vh;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: #ffffff;
        z-index: 150;
        border-radius: 25rpx 25rpx 0 0;
        transform: translate3d(0, 100%, 0);
        transition: all .3s cubic-bezier(.25, .5, .5, .9);
        overflow: auto;
        .header-container {
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            margin-bottom: 30rpx;
            position: sticky;
            top: 0;
            z-index: 9999;
            .text {
                font-weight: bold;
            }
        }
        .address {
            margin-bottom: 40rpx;
            width: 700rpx;
            height: auto;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 20rpx;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
            .left-container {

                display: flex;
                align-items: center;

                .checkbox-content {
                    width: 100rpx;
                }

                .right-content {
                    color: #333333;
                    display: flex;
                    flex-direction: column;
                    width: 500rpx;
                    .province-info {
                        display: flex;
                        align-items: center;
                        .default-content {
                            padding: 4rpx 12rpx;
                            background-color: #0abf4c;
                            font-size: 20rpx;
                            color: #ffffff;
                            border-radius: 8rpx;
                            margin-right: 12rpx;
                        }
                        .province {
                            font-size: 28rpx;
                        }
                    }
                    .detail {
                        width: 500rpx;
                        font-size: 30rpx;
                        margin: 15rpx 0;
                    }
                    .user-name {
                        display: flex;
                        font-size: 28rpx;
                        text:last-of-type {
                            margin-left: 15rpx;
                        }
                    }
                }
            }
            .edit-btn {
                margin-right: 30rpx;
                padding: 20rpx;
            }
        }

        .bottom-container {
            height: 90rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            position: sticky;
            bottom: 0;
            z-index: 9999;
            border-top: 1px solid #f8f8f8;
            .btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                color: #ffffff;
            }
            .cancel-btn {
                color: #0abf4c;
            }
            .confirm-btn {
                background-color: #0abf4c;
            }
        }

    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: .5;
        z-index: 5;
        width: 100vw;
        height: 100vh;
    }

</style>
